<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>文件管理器</title>
		<style type="text/css">
			html,
			body {
				padding: 0;
				margin: 0;
			}

			#App {
				background: transparent;
				width: 100vw;
				height: 100vh;
				display: flex;
				flex-direction: column;
			}

			#App .mask {
				background: rgba(0, 0, 0, .3);
				flex: 1;
				z-index: 12;
			}

			.file-content {
				z-index: 12;
				height: 60px;
				background: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
			}

			.btn {
				position: relative;
			}

			.btn .btn-bg {
				background: #0066CC;
				color: #fff;
				width: 100%;
				border-radius: 5px;
				padding: 8px 10px;
				border: 0;
			}

			.btn .file {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div id="App">
			<div class="mask" @click="closeCurrentWebview"></div>

			<div class="file-content">
				<div class="btn">
					<button type="button" class="btn-bg">打开文件管理器</button>
					<input ref="referenceUpload" class="file" type="file" @change="changeFile" />
				</div>
			</div>
		</div>
		<!-- uni 的 SDK -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/global.js"></script>
		<!-- <script type="text/javascript" src="../js/wps/web-office-sdk-v1.1.2.umd.js"></script> -->
		<script type="text/javascript">
			document.addEventListener('UniAppJSBridgeReady', function() {
				let that, xhr
				let query = GLOBAL_getUrlParam('data')
				new Vue({
					el: '#App',
					data: {

					},
					mounted() {
						that = this
					},
					methods: {
						//关闭当前webview
						closeCurrentWebview() {
							//向uniapp传值
							uni.postMessage({
								data: {
									type: 'close'
								}
							});
							// plus.webview.currentWebview().close();
						},
						//限制上传文件格式
						restrictFormatUploaded(name) {
							let mun = name.indexOf('.')
							let sliceName = name.slice(mun, name.length)
							let filetypes = ["jpg", "jpeg", "png", "rar", "txt", "zip", "doc", "ppt", "xls", "pdf", "docx", "xlsx",
								"mp4", "wmv", "avi", "mp3", "m4a", "wma",
								"JPG", "JPEG", "PNG", "RAR", "TXT", "ZIP", "DOC", "PPT", "XLS", "PDF", "DOCX", "XLSX", "MP4", "WMV", "AVI",
								"MP3", "M4A", "WMA"
							];
							let arr = filetypes.filter((res) => {
								if (sliceName.includes(res)) {
									return res
								}
							})
							let onoff = false
							if (arr.length > 0) {
								onoff = true
							} else {
								onoff = false
							}
							return onoff
						},
						//选取文件
						changeFile(event) {
							console.log(event);
							//上传成功后记得置空value否则不触发change事件 通过this.$refs.referenceUpload.value=null
							console.log(event.target.files[0].name);
							//限制上传文件格式
							let onoff = that.restrictFormatUploaded(event.target.files[0].name)
							if (!onoff) {
								plus.nativeUI.toast('不支持的上传文件类型');
								this.$refs.referenceUpload.value = null
								return
							}
							let file = event.target.files[0];
							if (file.size > (1024 * 1024 * 10)) {
								plus.nativeUI.toast('单个文件请勿超过10M,请重新上传');
								this.$refs.referenceUpload.value = null
								return;
							}
							this.createUpload(file);
						},
						createUpload(file) {
							// 向uniapp传值
							uni.postMessage({
								data: {
									type: 'FileReader',
									data:'正在读取...'
								}
							});
							var reader = new FileReader();
							reader.readAsDataURL(file)
							//读取文件base64
							reader.onloadend = function (e) {
								// this.result为base64
							    var dataURL = this.result
								console.log(dataURL.slice(0,55));
								//向uniapp传值
								uni.postMessage({
									data: {
										type: 'upload',
										data: dataURL,
										fileSize:file.size,
										fileName:file.name,
										fileType:file.type,
									}
								});
								that.$refs.referenceUpload.value = null
							}
						},

					}
				})
			});
		</script>
	</body>
</html>
